<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">

	<ui:define name="content">
		<h1 class="title ui-widget-header ui-corner-all">OrderList</h1>
		<div class="entry">
            <p>OrderList is used to sort a collection via Drag and Drop based reordering, transition effects, pojo support, theme support and more.</p>

            <h:form>

                <h3 style="margin-top:0">Basic OrderList</h3>
                <p:orderList value="#{orderListBean.cities}" var="city" controlsLocation="none"
                             itemLabel="#{city}" itemValue="#{city}" iconOnly="true"/>

                <p:commandButton value="Submit" update="displayCities" oncomplete="cityDialog.show()" style="margin-top:5px"/>
                
                <h3>Pojo Support with Clip Effect, Captions, Custom Content and Reorder Controls</h3>
                <p:orderList value="#{orderListBean.players}" var="player" iconOnly="true" effect="clip"
								itemValue="#{player}" converter="player" controlsLocation="left">
                    <f:facet name="caption">Available</f:facet>
                    
                    <p:column style="width:25%">
                        <p:graphicImage value="/images/barca/#{player.photo}" width="30" height="40" />
                    </p:column>
                    
                     <p:column style="width:75%;">
                        #{player.name} - #{player.number}
                    </p:column>
                </p:orderList>

                <p:commandButton value="Submit" update="displayPlayers" oncomplete="playerDialog.show()" style="margin-top:5px"/>

                <p:dialog modal="true" showEffect="fade" hideEffect="fade" widgetVar="cityDialog" header="Cities" width="200">
                    <p:dataList id="displayCities" value="#{orderListBean.cities}" var="city">
                        <h:outputText value="#{city}"  />
                    </p:dataList>
                </p:dialog>
                
                <p:dialog modal="true" showEffect="fade" hideEffect="fade" widgetVar="playerDialog" header="Players" width="200">
                    <h:panelGrid id="displayPlayers" columns="2">
                        <ui:repeat value="#{orderListBean.players}" var="player">
                            <h:outputText value="#{player.name} - #{player.number}" style="margin-right:5px" />
                            <br />
                        </ui:repeat>
                    </h:panelGrid>
                </p:dialog>

            </h:form>

            <h3>Source</h3>
            <p:tabView>
                <p:tab title="orderList.xhtml">
                    <pre name="code" class="xml">
&lt;h:form&gt;

    &lt;h3 style="margin-top:0"&gt;Basic OrderList&lt;/h3&gt;
    &lt;p:orderList value="\#{orderListBean.cities}" var="city" controlsLocation="none"
                 itemLabel="\#{city}" itemValue="\#{city}" iconOnly="true"/&gt;

    &lt;p:commandButton value="Submit" update="displayCities" oncomplete="cityDialog.show()" style="margin-top:5px"/&gt;

    &lt;h3&gt;Pojo Support with Clip Effect, Captions, Custom Content and Reorder Controls&lt;/h3&gt;
    &lt;p:orderList value="\#{orderListBean.players}" var="player" iconOnly="true" effect="clip"
                    itemValue="\#{player}" converter="player" controlsLocation="left"&gt;
        &lt;f:facet name="caption"&gt;Available&lt;/f:facet&gt;

        &lt;p:column style="width:25%"&gt;
            &lt;p:graphicImage value="/images/barca/\#{player.photo}" width="30" height="40" /&gt;
        &lt;/p:column&gt;

         &lt;p:column style="width:75%;"&gt;
            \#{player.name} - \#{player.number}
        &lt;/p:column&gt;
    &lt;/p:orderList&gt;

    &lt;p:commandButton value="Submit" update="displayPlayers" oncomplete="playerDialog.show()" style="margin-top:5px"/&gt;

    &lt;p:dialog modal="true" showEffect="fade" hideEffect="fade" widgetVar="cityDialog" header="Cities" width="200"&gt;
        &lt;p:dataList id="displayCities" value="\#{orderListBean.cities}" var="city"&gt;
            &lt;h:outputText value="\#{city}"  /&gt;
        &lt;/p:dataList&gt;
    &lt;/p:dialog&gt;

    &lt;p:dialog modal="true" showEffect="fade" hideEffect="fade" widgetVar="playerDialog" header="Players" width="200"&gt;
        &lt;h:panelGrid id="displayPlayers" columns="2"&gt;
            &lt;ui:repeat value="\#{orderListBean.players}" var="player"&gt;
                &lt;h:outputText value="\#{player.name} - \#{player.number}" style="margin-right:5px" /&gt;
                &lt;br /&gt;
            &lt;/ui:repeat&gt;
        &lt;/h:panelGrid&gt;
    &lt;/p:dialog&gt;

&lt;/h:form&gt;
                    </pre>
                </p:tab>

                <p:tab title="OrderListBean.java">
                    <pre name="code" class="java">
package org.primefaces.examples.view;

import java.util.ArrayList;
import java.util.List;

import org.primefaces.examples.domain.Player;

public class OrderListBean {

	private List&lt;Player&gt; players;
	
	private List&lt;String&gt; cities;

	public OrderListBean() {
        
		//Players
        players = new ArrayList&lt;Player&gt;();
		players.add(new Player("Messi", 10, "messi.jpg"));
		players.add(new Player("Iniesta", 8, "iniesta.jpg"));
		players.add(new Player("Villa", 7, "villa.jpg"));
		players.add(new Player("Xavi", 6, "xavi.jpg"));
        
		//Cities
		cities = new ArrayList&lt;String&gt;();
		
		cities.add("Istanbul");
		cities.add("Ankara");
		cities.add("Izmir");
		cities.add("Antalya");
		cities.add("Bursa");
	}

    public List&lt;String&gt; getCities() {
        return cities;
    }
    public void setCities(List&lt;String&gt; cities) {
        this.cities = cities;
    }

    public List&lt;Player&gt; getPlayers() {
        return players;
    }
    public void setPlayers(List&lt;Player&gt; players) {
        this.players = players;
    }
}
                    </pre>
                </p:tab>

            </p:tabView>
            

        </div>

	</ui:define>
</ui:composition>
